<template>
      <h1>权限管理</h1>
<div class="container">
    <el-card class="card">
        <p style="color: black; font-size: 20px; font-weight:600">输入用户名</p>
        <el-input type="text" style="width: 250px;" v-model="user.username" placeholder="输入人员名称"></el-input>
        <p style="color: black; font-size: 20px; font-weight:600">输入手机号</p>
        <el-input type="text" style="width: 250px;" v-model="user.phone" placeholder="输入人员名称"></el-input>
        <div class="button">
        <el-button @click="elevateprivileges">提升权限</el-button>
        <el-button @click="dropprivileges">降低权限</el-button>
        </div>
    </el-card>
</div>
<el-dialog title="身份验证（权限提升）" v-model="dialogVisible" width="30%" @close="dialogVisible = false">
    <el-form :model="admin">
      <el-form-item label="用户名">
        <el-input v-model="admin.username" placeholder="请输入您的用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="admin.password" placeholder="请输入您的密码" t></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="Verification">确认验证</el-button>
    </span>
  </el-dialog>
  <el-dialog title="身份验证（权限降低）" v-model="dialogVisibledown" width="30%" @close="dialogVisibledown = false">
    <el-form :model="admin">
      <el-form-item label="用户名">
        <el-input v-model="admin.username" placeholder="请输入您的用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="admin.password" placeholder="请输入您的密码" t></el-input>
      </el-form-item>
    </el-form>
    <span class="dialog-footer">
      <el-button @click="dialogVisibledown = false">取消</el-button>
      <el-button type="primary" @click="Validation">确认验证</el-button>
    </span>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios';

const token = localStorage.getItem('adminToken')

const dialogVisible = ref(false);
const dialogVisibledown = ref(false);

const admin = ref({
    username: '',
    password: ''
})

const user = ref({
    username: '',
    password: ''
})

//查询人员信息是否存在（提升权限按钮）
async function elevateprivileges(){   
    if(user.value.username == '' || user.value.phone == ''){
        ElMessage({
            message: '请输入用户名和手机号',
            type: 'warning'
        })
    }
  try{
    const response = await axios.post('http://back1.idcfengye.com:15173/competition/user/update/info',user.value, {
        headers: {
            'Authorization':`Bearer ${token}`,
        }
    }) 
    if(response.data.success){
        handleSubmit();
    }
  }catch(error){
    console.log(error)
  }
}

//降低权限触发按钮
async function dropprivileges(){
    if(user.value.username == '' || user.value.phone == ''){
        ElMessage({
            message: '请输入用户名和手机号',
            type: 'warning'
        })
    }
    try{
    const response = await axios.post('http://back1.idcfengye.com:15173/competition/user/update/info',user.value, {
        headers: {
            'Authorization':`Bearer ${token}`,
        }
    }) 
    if(response.data.success){
        handleSubmitdown();
    }
  }catch(error){
    console.log(error)
  }
}

//让管理员确认操作（提升权限的操作）
const handleSubmit = async () => {
  ElMessageBox.confirm(` 您确定要提升该用户的权限`, '确认提升权限', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dialogVisible.value = true;
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消提升'
    });
  });
}

//让管理员确认操作（降低权限的操作）
const handleSubmitdown = async () => {
  ElMessageBox.confirm(` 您确定要降低该用户的权限`, '确认降低权限', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    dialogVisibledown.value = true;
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消降低'
    });
  });
}

//身份验证(提升权限)
async function Verification(){
    try{
        const response = await axios.post('http://back1.idcfengye.com:15173/competition/user/adminLogin',admin.value, {
            headers: {
                'Authorization':`Bearer ${token}`,
            }
        }) 
        if(response.data.success){
           try{
                const response = await axios.post('http://back1.idcfengye.com:15173/competition/user/update/role',user.value, {
                    headers: {
                        'Authorization':`Bearer ${token}`,
                    }
                }) 
                if(response.data.success){
                    ElMessage({
                        message: '权限提升成功',
                        type: 'success'
                    })
                    dialogVisible.value = false;
                }
           }catch(error){
               console.log(error)
           }
         }
    }catch(error){
        console.log(error)
    }

}

//身份验证(降低权限)
async function Validation(){
    try{
        const response = await axios.post('http://back1.idcfengye.com:15173/competition/user/adminLogin',admin.value, {
            headers: {
                'Authorization':`Bearer ${token}`,
            }
        }) 
        if(response.data.success){
           try{
                const response = await axios.post('http://back1.idcfengye.com:15173/competition/user/down/role',user.value, {
                    headers: {
                        'Authorization':`Bearer ${token}`,
                    }
                }) 
                if(response.data.success){
                    ElMessage({
                        message: '权限降低成功',
                        type: 'success'
                    })
                    dialogVisibledown.value = false;
                }
           }catch(error){
               console.log(error)
           }
         }
    }catch(error){
        console.log(error)
    }

}

</script>

<style  scoped>
.container{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40vh;
}
.card{
    display: flex;
    flex-direction: column;
    width: 50vh; 
    border-radius: 30px;
    background-color: red;
    opacity: 0.6;
    padding: 30px;
}
h1{
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button{
  margin-top: 20px;
}
</style>